<template>
   <div class="myFriend">
       
       <van-tabs v-model="activeName">
          <van-tab  title="关注" name="a">
                  <div class="item" v-for="item in myAttention" :key="item.userId">
                      <div class="img">
                          <van-image lazy-load :src="item.avatarUrl" alt=""/>
                      </div>
                      <div class="right">
                          <div class="name">
                              <span>{{item.nickname}}</span>
                          </div>
                         
                      </div>
                  </div>
          </van-tab>
          <van-tab title="粉丝" name="b">
               <div class="item" v-for="item in followeds" :key="item.userId">
                      <div class="img">
                          <van-image lazy-load :src="item.avatarUrl" alt=""/>
                      </div>
                      <div class="right">
                          <div class="name">
                              <span>{{item.nickname}}</span>
                          </div>
                         
                      </div>
                  </div>
          </van-tab>
     
        </van-tabs>
         <router-link tag="div" to="/userinfo" class="goback">
           <span class="iconfont icon-zuojiantou"></span>
         </router-link>       
   </div>
</template>

<script>
import { getUserfollows,getUserFolloweds} from "../../api/person"
export default {
    data(){
        return{
            activeName: 'a',
            uid:null,
            myAttention:[], //我的关注
            followeds:[], //我的粉丝
        }
    },
    created(){
        this.uid = window.localStorage.getItem("uid")
         getUserfollows({uid:this.uid}).then(data=>{
        
             this.myAttention = data.follow
         })

        getUserFolloweds({uid:this.uid}).then(data=>{
            
            this.followeds = data.followeds
        })

    }
}
</script>

<style lang="less">
    .myFriend{
        position: relative;
        width: 100%;
        height: 100%;
       .goback{
           position: absolute;
           top: 13px;
           left: 10px;
           .icon-zuojiantou{
               font-size: 18px;
           }
       }
        .van-tab {
                font-size: 18px;
                font-weight: bold;
        }
       .item{
           width: 95%;
           margin: 0 auto;
           display: flex;
           margin-top: 10px;
           .img{
               width: 50px;
               height: 50px;
               border-radius: 50%;
               img{
                   width: 50px;
                   height: 50px;
                   border-radius: 50%;
               }
           }
           .right{
               margin-left: 10px;
               .name{
                   font-size: 16px;
                   color: #464646;
                    line-height: 50px;
                   margin: 0 auto;
               }
              
           }
       }
    
    }
</style>